require('./EngSelect.less');
import React from 'react';
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import fangzi from './../../../assets/icon/房子.png';
import { LoadMore ,Button, Popup,CellsTip,Radio ,Form ,FormCell ,Cells,  Cell,  CellsTitle,  CellHeader,  CellBody,  CellFooter ,InfiniteLoader ,
  Panel,  PanelHeader,  PanelBody,  PanelFooter,PreviewFooter,PreviewButton,
  SearchBar,
  MediaBox,
  MediaBoxHeader,
  MediaBoxBody,
  MediaBoxTitle,MediaBoxInfoMeta,MediaBoxInfo,
  MediaBoxDescription,} from  'react-weui/build/packages'
import 'weui';
import 'react-weui/build/packages/react-weui.css';

const appMsgIcon = <img
  src=""/>

const CellMore = () => (
  <Cell access link>
    <CellBody>加载更多</CellBody>
    <CellFooter />
  </Cell>
)

class EngSelect extends React.Component {
  constructor(props) {
    super(props);

    console.log(props);
    this.handleChange = this.handleChange.bind(this);
    this.myselecteng = this.myselecteng.bind(this);

    this.hidePopup = this.hidePopup.bind(this);
    this.scrollEnd = this.scrollEnd.bind(this);
    this.scroll = this.scroll.bind(this);
    this.ok = this.ok.bind(this);
  }

  handleChange(text, e){
    let keywords = [text];
    Actions.engSearch(keywords);
    this.setState({searchText:text});
  }

  myselecteng(obj) {
    Control.go('/myyewu/rizhiaq');
  }

  componentWillMount() {
    Actions.initMode();
  }

  componentDidMount() {
    Actions.init();
    //Actions.setinfs(this.refs.infs);

    //this.refs.infs.scrollTo(0,100);
    //1082
    //this.refs.infs.scrollTop = 1082
    // window.document.getElementById('infs').scrollTop = 0;

  }

  scroll(e) {
    //console.log(window.document.getElementById('infs').scrollTop);
  }

  scrollEnd(e) {

  }



  hidePopup() {
    Actions.hidePopup();
  }


  getCurrentEng() {
    Actions.showPopup();
  }



  ok() {
     this.hidePopup();
     this.props.onSelectEng(this.state.engselect.currentEng);
  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.engselect || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  render() {
    const pevents = {
      created: (obj) => {
        Actions.setPlaceSearch(obj);
      },
    }

    const gevents = {
      created: (obj) => {

      },
    }
    return (
      <div>
        <Popup
          show={this.state.engselect.fullpage_show}
          onRequestClose={this.hidePopup}>
          <page>

          <div style={{height: '100vh', overflow: 'scroll'}}>
            <div>1</div>
            <div>1</div>

            <SearchBar
              onChange={this.handleChange.bind(this)}
              defaultValue={this.state.searchText}
              placeholder="请输入工程名称"
              lang={{
                cancel: '取消'
              }}
            />

            <Panel style={{display:  null , marginTop: 0}}>

              <PanelBody>

                <Form radio>
                {
                  this.state.engselect.engls.length > 0 ?
                    this.state.engselect.engls.map((item,i)=>{
                      return (
                        <FormCell radio onClick={
                          (e)=>{
                            Actions.setEng(item);
                          }
                        }>
                            <CellHeader  access link onClick={this.mypreview} style={{position: 'relative', marginRight: '10px'}}>
                              <img src={fangzi} alt="" o style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                            </CellHeader>
                            <CellBody>
                              <p>{item.engName}  </p>

                              <p style={{fontSize: '13px', color: '#888888'}}>  { item.engJsdw }</p>
                              <p style={{fontSize: '13px', color: '#888888'}}>{ item.engAddress}</p>
                            </CellBody>
                            <CellFooter>
                              <Radio value={item.id} checked={this.state.engselect.currentEng.id===item.id}/>
                            </CellFooter>

                        </FormCell>

                      )
                    })
                    : <MediaBox>未找到数据！</MediaBox>
                }
                </Form>
              </PanelBody>
              <PanelFooter href="javascript:void(0);">
                {/*<CellMore />*/}
              </PanelFooter>




            <PreviewFooter>
              <PreviewButton primary onClick={this.ok}>确定</PreviewButton>
              <PreviewButton onClick={this.hidePopup}>返回</PreviewButton>
            </PreviewFooter>

            </Panel>

          </div>
          </page>
        </Popup>

      </div>
    );
  }
}

ReactMixin.onClass(EngSelect, Reflux.connect(Store, 'engselect'));

export default EngSelect ;
